<template>
  <view class="container">
    <view style="font-weight: bold; font-size: 48rpx; color: #151515">我的生日</view>
    <view style="font-weight: 500; font-size: 24rpx; color: #ff3742">注册后生日不可修改</view>

    <!-- 选择器 -->
    <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
      <picker-view-column>
        <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
      </picker-view-column>
    </picker-view>

    <view class="btn" @click="saveinfo">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      years: [],
      year: '',
      months: [],
      month: '',
      days: [],
      day: '',
      value: [9999, 1, 2],
      indicatorStyle: `height: 50px;`
    };
  },
  onLoad() {
    const date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.day = date.getDate();
    for (let i = 1970; i <= date.getFullYear(); i++) {
      this.years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      this.months.push(i);
    }
    for (let i = 1; i <= 31; i++) {
      this.days.push(i);
    }
    // console.log(this.years);
  },
  methods: {
    bindChange(e) {
      console.log(e.detail.value);
      const val = e.detail.value;
      console.log(this.years);
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
      this.month = this.month < 10 ? '0' + this.month : this.month;
      this.day = this.day < 10 ? '0' + this.day : this.day;
      console.log(this.year, this.month, this.day);
    },
    async saveinfo() {
      const res = await this.http('/user/profile', {
        birthday: this.year + '-' + this.month + '-' + this.day
      });
      console.log(res);
      if (res.code == 1) {
        uni.navigateTo({
          url: '/login/choosecity/choosecity'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 48rpx;
  padding-top: 68rpx;
  .picker-view {
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
  }
  .item {
    line-height: 100rpx;
    text-align: center;
  }
  .btn {
    position: fixed;
    bottom: 180rpx;
    left: 40rpx;
    width: 670rpx;
    height: 100rpx;
    background: #feff01;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #151515;
  }
}
</style>
<style>
page {
  background: linear-gradient(98deg, #fefbff 0%, #fffbf5 100%);
}
</style>
